$(function () {
  // 1- 获取地址栏关键字   
  // location.search : 获取url中 数据部分 ?name=zs
  // decodeURI() 将地址栏中文编码转回中文   
  var key = decodeURI(location.search.split('=')[1]);
  console.log(key);
  // 关键字 设置到输入框 
  $('.search_input').val(key);

  // 2- 根据关键字 去后台查找对应商品，并渲染到页面
  // 根据关键字 查找商品 并渲染的方法 
  var obj = {
    proName: key,
    page: 1,
    pageSize: 100
  };

  function render () {
    $.ajax({
      type: 'get',
      url: '/product/queryProduct',
      data: obj,
      dataType: 'json',
      beforeSend: function () {
        $('.lt_product').html('<div class="loading"></div>');
      },
      success: function (res) {
        console.log(res);
        // 渲染
        setTimeout(function () {
          $('.lt_product').html(template('tmp', res));
        }, 800);

      }
    })
  }

  render();

  // 3- 在点击搜索按钮，重新搜索新商品 
  // 1- 关键字非空校验 
  // 2- 添加
  // 3- 长度校验 
  // 4- 去重 
  // 5- 根据新关键字去查找商品，渲染 
  $('.search_btn').click(function () {
    // 获取输入框的值
    var txt = $('.search_input').val();
    // 判断是否为空
    if (txt.trim().length == 0) {
      // 提示错误
      mui.toast('请输入关键字');
      return;
    }
    // 添加
    // 1- 先取出json字符串，转成数组 
    var arr = JSON.parse(localStorage.getItem('search')) || [];
    // 去重： 在新记录添加之前，先查找本地是否有重复项，如果有先删除重复项，在添加新记录
    // arr.indexOf(b), 查找b在数组中的下标，如果找到返回下标，找不到返回-1 
    var index = arr.indexOf(txt);
    if (index > -1) {
      // 如果有先删除重复项，在添加新记录
      arr.splice(index, 1);
    }

    // 2- 向数组中进行添加 
    arr.unshift(txt);
    // 在添加了新的历史记录后，判断数组长度是否越界（超过6条）如果超过，删除最后一条
    if (arr.length > 6) {
      arr.pop();
    }
    // 3- 从数组中添加后，在把数组转回字符串，存回会到本地 
    localStorage.setItem('search', JSON.stringify(arr));

    // 4- 根据新输入的关键字，去搜索商品 并渲染 
    obj.proName = txt;
    // 重新渲染
    render();
  })


})